<template>
	<view class="login">
		<view class="ding"></view>
		<view class="top-title">
			<view class="iconBox">
				<image src="/static/category/back.png" 
					   mode="aspectFill" 
					   class="img22 img21"
						@click="onClickLeft"></image>
				<text class="shu">|</text>
				<image src="/static/category/back-home.png"
					   mode="aspectFill" 
				       class="img22 img23"
					   @click="onClickHome"></image>
			</view>
			<text class="txt-title">登录</text>
		</view>
		<view class="top-white">
			<view class="logo-box1">
				<image src="/static/category/logo.png" mode="aspectFill" class="logo-box"></image>
			</view>
			<view class="top-bottom">
				<image src="/static/category/logo-bottom.png" mode="aspectFit" class="img-bottom"></image>
			</view>
		</view>
		<view class="login-box">
			<button type="default" class="loginBtn" open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
		</view>
		<view class="login-box">
			<button type="default" class="loginBtn hao">手机号登录/注册</button>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				type: ''
			};
		},
		computed: {
		},
		onLoad(option) {
			this.type = option.toPath
		},
		methods: {
			...mapMutations({
				changeUserInfo: "changeUserInfo"
			}),
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClickHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getUserInfo(e) {
				if(e.detail.userInfo) {
					let res = e.detail.userInfo
					this.changeUserInfo(res)
					//跳转到详情页
					if(this.type) {
						uni.redirectTo({
							url: '/pages/goodsDetail/goodsDetail'
						})
					}
					else {
						uni.switchTab({
							url: '/pages/profile/profile'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		overflow: hidden;
	}
	.ding {
		position: fixed;
		width: $uni-width;
		top: 0;
		height: 130rpx;
		background-color: #f8f8f8;
		z-index: 12;
	}
	.top-title {
		position: fixed;
		width: $uni-width;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		padding-top: 127rpx;
		padding-bottom: 20rpx;
		background-color: white;
		z-index: 10;
		.txt-title {
			font-size: 40rpx;
			font-weight: 500;
			letter-spacing: 3rpx;
		}
		.iconBox {
			position: absolute;
			width: 150rpx;
			height: 50rpx;
			text-align: center;
			top: 181rpx;
			transform: translateY(-50%);
			line-height: 50rpx;
			margin-left: 30rpx;
			border: 2rpx solid #dddddd;
			border-radius: 30rpx;
			.shu {
				color: #dddddd;
			}
			.img21 {
				margin-right: 6rpx;
			}
			.img22 {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
			.img23 {
				margin-left: 10rpx;
			}
		}
		
	}
	.top-white {
		position: relative;
		width: $uni-width;
		background-color: white;
		height: 600rpx;
		margin-top: 162rpx;
		.logo-box1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 150rpx;
			height: 100rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: black;
			.logo-box {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 150rpx;
				height: 70rpx;
			}
		}
		.top-bottom {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 350rpx;
			width: 500rpx;
			height: 150rpx;
			.img-bottom {
				width: 500rpx;
				height: 150rpx;
			}
		}
	}
	.login-box {
		.loginBtn {
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: white;
			font-size: 40rpx;
			background-color: #01c2c3;
			border-radius: 0px;
			letter-spacing: 4rpx;
			font-weight: 500;
		}
		.hao {
			margin-top: 20rpx;
			background-color: white;
			color: #737373;
			border: 2rpx solid #e2e2e2;
		}
	} 
</style>
